<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=\, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    *{
        padding: 0;margin: 0;
    }
    form{
        width: 350px;
        background-color: darkkhaki;
        margin: 20px auto;
        padding: 0 15px;
        color: darkmagenta;
        border-radius: 5px;
    }
    .step{
        font-size: 14px;
        font-weight: bold;
        margin: 10px 0;
    }
    .form-line{
        border-radius: 5px;
        border-color: rgb(73, 124, 73);
        border-width: 2px;
        border-style: solid;
        padding: 3px;
        margin: 3px 0;
        background-color: mediumseagreen;
        font-size: 12px;
        padding-left: 10px;
    }
    .form-line span{
        display: inline-block;
        width:110px;
    }
    .form-line input{
        background: white;
        border:none;
        height: 20px;
        border-radius: 3px;
        width: 180px;
        outline: none;
    }
    .form-line input[type=radio]{
        width: 25px;
        height: 12px;
    }
    .form-line textarea{
        width: 180px;
        height: 70px;
        vertical-align: top;
        border: none;
        border-radius: 3px;
    }
    input.submit_btn{
        border:none;
        background-color: bisque;
        color: white;
        display: block;
        width: 100px;
        padding: 5px 0;
        border-radius: 20px;
        margin: 10px auto;
        cursor: pointer;
    }
    input.submit_btn:hover{
        color: rgb(236, 165, 11);
    }
</style>
<body>
    <!--
        resize:both(默认) none(不可调整) vertical(仅垂直可调整) horizontal(仅水平可调整)
        cursor:auto(默认) crosshair(十字线) pointer(一只小手) move(十字箭头)
    -->
    <form action="">
        <section>
            <p class="step">第一步，详细信息</p>
            <p class="form-line">
                <span>姓名</span>
                <input type="text" placeholder="请输入姓名">
            </p>
            <p class="form-line">
                <span>电话</span>
                <input type="text" placeholder="请输入电话">
            </p>
            <p class="form-line">
                <span>Facebook主页</span>
                <input type="url">
            </p>
        </section>
        <section>
            <p class="step">第二步，收货地址</p>
            <p class="form-line">
                <span>详细地址</span>
                <textarea placeholder="想吃啥就吃啥吧"></textarea>
            </p>
            <p class="form-line">
                <span>邮编</span>
                <input type="text">
            </p>
        </section>
        <section>
            <p class="step">第三步，银行卡信息</p>
            <p class="form-line">
                <span>银行卡类型</span>
                <input type="radio" name="cardType">借记卡
                <input type="radio" name="cardType">信用卡
                <input type="radio" name="cardType">VISA卡
            </p>
            <p class="form-line">
                <span>卡号</span>
                <input type="number">
            </p>
            <p class="form-line">
                <span>密码</span>
                <input type="number" placeholder="这个不用输入">
            </p>
            <p class="form-line">
                <span>持卡人</span>
                <input type="text">
            </p>
        </section>
        <p>
            <input type="submit" class="submit_btn">
        </p>
    </form>
</body>
</html>